<template>
  <div class="order"  style="background: #F0F0F0; padding-bottom: 150px">
      <!-- 导航 -->
    <header class="header">
      <span  @click="()=>{this.$router.go(-1)}"><img src="img/return.png" alt="" /></span>
      <span>确认订单</span>
      <hr style="width: 93%; margin: auto" />
    </header>
    <!-- 用户 -->
    <section>
        <div class="user">
            <div class="user_1">
                <div>
                    <p><span><i class="iconfont iconuser"></i>{{v_name}}</span><span><i class="iconfont icondianhua"></i>{{v_phone}}</span></p>
                </div>
                <div id="address">
                    <textarea name="" id="" cols="30" rows="10" v-model="v_address"></textarea>
                </div>
            </div>
            <!-- <router-link></router-link> -->
            <router-link :to="path_1" class="user_2"><i class="iconfont iconyoujiantou"></i></router-link>
        </div>
        <!-- 详细信息 -->
        <div class="xiang" style="background: #fff;"  >
            <p>阿斌水果旗舰店</p>
            <div class="xiang_1" v-for="(item,index) in nav" :key="index">
                <div class="xiang_11"><img :src="item.src"/></div>
                <div class="xiang_12">{{item.proName}}</div>
                <div class="xiang_13">
                     <p><span>x</span>{{item.proNum}}</p>
                    <p><span>¥</span>{{item.proPrice}}.00</p>
                </div>
            </div>
        </div>
        <!-- 结算 -->
        <div class="jie">
            <p>结算</p>
            <p>商品合计<span class="mon">¥<i>{{allPrice}}</i><i>.00</i></span></p>
        </div>
    </section>
    <!-- 底部 -->
    <footer id="nav">
     <span>实付款:¥<i>{{allPrice}}</i><i>.00</i></span>
     <span>提交订单</span>
    </footer>
  </div>
</template>

<style lang="less" scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
// 顶部
.header {
  background-color: #fff;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
//   margin-bottom: ;
  span {
    font-size: 16px;
    line-height: 43px;
    margin-left: -26px;
    overflow: hidden;
    img {
      width: 25px;
      float: left;
      margin: 7px 0 0 10px;
    }
  }
}
section{
    padding-top: 60px;
}
.user{
    width: 93%;
    border-radius: 15px;
    height: 100px;
    margin: 0 auto 20px;
    display: flex;
    flex-wrap: nowrap;
    font-size: 14px;
    background-color: #fff;
    // padding: 20px 20px;
    i{
        font-size: 18px;
        padding: 1px;
        margin-right: 4px;
        border: 1px solid #757575;
        color: #757575;
        border-radius: 50%;
    }
}
.user_1{
    flex: 9;
    height: 100%;
    line-height: 100%;
    display: flex;
    flex-direction: column;
    align-content: space-around;
    padding: 20px;
}
.user_1 div:first-child{
    width: 100%;
    height: 50%;
    border-bottom: 1px solid #eeeeee;
    p span:last-child{
        float: right;
    }

}
.user_1 div:last-child{
    width: 100%;
    height: 50%;
    
     textarea{
        width: 100%;
        height: 25px;
        line-height: 25px;
        border: none;
        text-align: center;
    }
}
.user_2{
    height: 100px;
    flex: 1;
    line-height: 100px;
    text-align: center;
    padding: 0;
    i{
        border: none;
    }
}
//  详细信息
.xiang{
    width: 93%;
    border-radius: 15px;
    margin: 0 auto;
    padding: 0px  10px;
    font-size: 18px;
    p:nth-child(1){
        margin: 0px 10px 5px;
    }
}
.xiang_1{
    width: 100%;
    display: flex;
    flex-wrap: nowrap; 
    border-top: 1px solid #eeeeee;  
    border-bottom: 1px solid #eeeeee;  
}
.xiang_11{
    flex: 2;
    img{
        width: 100%;
        height: 100%;
    }
}
.xiang_12{
    flex: 6;
    font-size: 14px;
    padding: 16px 3px;

}
.xiang_13{
    flex: 2;
    font-size: 16px;
    text-align: right;
    color: #FF840B;
    p{
        padding-top: 15px;
        height: 35%;
        line-height: 35%;
    }
}
// 结算
.jie{
    width: 93%;
    margin:15px auto 0 ;
    background-color: #fff;
    // width: 100%;
    font-size: 16px;
    // margin-top: 20px;
    border-radius: 15px;
    p{
        border-bottom: 1px solid #eeeeee;
        height: 40px;
        line-height: 40px;
        padding:0 20px;
    }
    .mon{
        float: right;
        color: #DE1D42;
        font-size: 18px;
    }
}
// 底部
 #nav{
    width: 100%;
    position: fixed;
    background-color: #fff;
    height: 45px;
    line-height:45px ;
    left: 0;
	bottom: 0;
    display: flex;
    text-align: center;
    font-size: 16px;
  }
  #nav span:first-child{
    flex: 6;
    color: #c1567a;
    i{
        font-size: 18px;
        margin-left: 3px;
        color: #DE1D42;
    }
}
#nav span:nth-child(2){
    background-color: #DE1D42;
    color: #fff;
    flex: 4;
}
</style>

<script>
export default{
  data(){
    return{
      nav:[ // 底部标签数据
        // {src:"../../img/jing_1.jpg",proName:'南非红心西柚8个装南非红心西柚8个装',proNum:1,proPrice:'39'},
        // {src:"../../img/jing_2.jpg",proName:'泰国黑金刚莲雾共3斤泰国黑金刚莲雾共3斤',proNum:1,proPrice:'60'},
        // {src:"../../img/jing_3.jpg",proName:'泰国进口红毛丹5斤泰国进口红毛丹5斤',proNum:1,proPrice:'50'},
        // {src:"../../img/jing_4.jpg",proName:'智利进口车厘子J级 1磅装 智利进口车厘子J级 1磅装',proNum:1,proPrice:'90'},
      ],
      user:'',
      path:'/Shopping',
      path_1:'/Address',
      allPrice:'',
     
          v_name:'王小二',
          v_phone:'15979005213',
           v_address:'北京市朝阳区',
    }
  },

    methods:{
            // fun:function(){
            //     // this.account=JSON.parse(localStorage.getItem('address'))
            //     var localAddress=JSON.parse(localStorage.getItem('address'));   //获取本地存储的用户地址等信息
            //     // console.log(address);
            //     this.v_name=localAddress.v_name;     //用户姓名渲染
            //     this.v_phone=localAddress.v_phone;   //用户手机号渲染
            //     this.v_address=localAddress.v_address+localAddress.v_home; //用户地址渲染
            // }
    },
     mounted(){
        setTimeout(() => {
            var person=JSON.parse(localStorage.getItem('personMsg'));
        this.allPrice=JSON.parse(localStorage.getItem('allPrice'));
        this.user=person.name; 
         console.log(this.user);
         this.$axios.post("http://47.114.130.21:3003/Order",{name:this.user}).then((data) => {
         this.nav=data.data[0].amount;
         this.v_name=data.data[0].address.v_name;
         this.v_phone=data.data[0].address.v_phone;
         this.v_address=data.data[0].address.v_address;
        // console.log(data.data[0].amount);
       
        })
        }, 500);




        
         
         console.log(this.nav);
            //自动加载indexs方法
            // this.fun();
  }
    
}
</script>